<template>
    <view class="content" :style="{height:height+'px'}">
        <view style="background: white">
            <view class="input-wrap">
                <text class="input-key">收款姓名</text>
                <input v-model="userData.trueName" disabled="true"/>
            </view>
            <view class="input-wrap">
                <text class="input-key">收款卡号</text>
                <input v-model="userData.card2" style="width: 70%" disabled="true"/>
            </view>
            <view class="input-wrap">
                <text class="input-key">收款银行</text>
                <input v-model="ssss" style="width: 70%" disabled="true"/>
            </view>
            <view style="border-bottom:1px solid #E8E8E8;height: 40upx;background:#F3F3F3;"/>
            <view class="input-wrap">
                <text class="input-key">转入金额(元)</text>
                <input v-model="num" type="number" maxlength="18" placeholder="请输入转入金额"/>
            </view>
            <view class="input-wrap">
                <text class="input-key">付款卡号</text>
                <text @click="showBank(true)" class="bank-value"
                      :style="{color:bank=='请选择付款卡号'?'#7f7f7f':'#5e93c6'}">{{bank}}</text>
<!--                    <text style="color:#7f7f7f">》</text></text>-->
            </view>

        </view>
        <button type="warn" class="sub-button" @click="transfer">
           提交
        </button>
        <view class="msg">
            温馨提示:<br/>
            1.点击“转入"，完成I类账户向Il类账户的资金转入<br/>
            2.点击“转出”，完成I类账户向I类账户的资金转出<br/>
            3.点击“账户变更”，完成I类账户变更和已绑定类账户的解绑<br/>
            4.转入完成后，请您按照房产公司要求，尽快完成诚e金缴存
        </view>
        <uni-popup :show="bankVisible"  mode="fixed" position="bottom" type="bottom"
                   msg="选择银行">
            <picker-view  class="pick-time" :style="{height:height*0.5+'px'}" :value="valueBank" @change="bankChange">
                <picker-view-column>
                    <view class="item" v-for="(item,index) in banks" :key="index">{{item.mediumId}}</view>
                </picker-view-column>
            </picker-view>
            <view class="pick-button" style="width:calc(50% - 1px);border-right: 1px solid #E8E8E8" @click="bankOk">
                确定
            </view>
            <view class="pick-button" @click="showBank(false)">
                取消
            </view>
        </uni-popup>
    </view>
</template>

<script>
    import API from '../../common/api.js';
    import uniPopup from "@/components/uni-popup/uni-popup.vue"
    export default {
        components: {uniPopup},
        data() {
            return {
                ssss:'中国工商银行',
                height: uni.getSystemInfoSync().windowHeight,
                bankName:'中国工商银行',
                bank:'请选择付款卡号',
                banks:[],
                bankTemp:'',
                bankVisible:false,
                num:'',
                userData:JSON.parse(uni.getStorageSync('data')),
                type:0
            }
        },
        onLoad(option) {
            this.type=option.type
            console.log(this.userData)
            this.getData()
        },
        methods: {
            transfer(){
                if(this.num<=0){
                    uni.showModal({
                        title: '提示',
                        content: '请输入大于0的金额',
                        showCancel: false,
                    });
                    return
                }
                if(this.bank=='请选择付款卡号'){
                    uni.showModal({
                        title: '提示',
                        content: '请选择付款卡号',
                        showCancel: false,
                    });
                    return
                }
                uni.showModal({
                    title: '提示',
                    content: `确认提交？`,
                    success: (res)=> {
                        if (res.confirm) {
                            console.log('用户点击确定');
                            API.bankRecharge({"accountNumber1": this.bank,
                                "money": parseInt(this.num)*100,
                                "token": uni.getStorageSync('token')}).then(res=>{
                                if(res.status==200){
                                    if(res.data.returnCode==0){
                                        uni.navigateTo({
                                            url: '../account/success?type='+this.type
                                        });
                                    }else{
                                        uni.showModal({
                                            title: '提示',
                                            content: res.data.returnMsg,
                                            showCancel: false,
                                        });
                                    }
                                }else{
                                    uni.showModal({
                                        title: '提示',
                                        content: '提交失败',
                                        showCancel: false,
                                    });
                                }
                            })
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });

            },
            getData(){
                API.bankBindings({"targetId": this.userData.id,
                    "token": uni.getStorageSync('token')}).then(res=>{
                    if(res.status==200){
                        this.banks=res.banks
                        this.bankTemp=this.banks[0].mediumId
                        console.log(this.banks)
                    }
                })
            },
            goUrl(url){
                uni.navigateTo({
                    url: '../account/'+url
                });
            },
            showBank(flag){
                this.bankVisible=flag
            },
            bankChange(e){
                this.bankTemp=this.banks[e.detail.value[0]]
            },
            bankOk(){
                this.bank=this.bankTemp
                this.bankVisible=false
            },
        }
    }
</script>
<style scoped>
    .content {
        height: 100%;
        /*padding-top: 20upx;*/
        background: #F3F3F3;
    }
    button{
        width: 49%;
        margin-top:30upx;
        background: #D14F43;
        border-radius: 4upx;
    }
    .input-wrap{
        display: flex;
        justify-content: space-between;
        padding: 0 3%;
        border-bottom: 1px solid rgba(227, 227, 227, 1);
    }
    .input-key{
        font-size: 32upx;
        color: #64727f;
        line-height: 112upx;
    }
    input{
        padding:30upx 0;
        color: #5e93c6;
        font-size: 28upx;
        text-align: right;
        font-family: PingFangSC-regular;
        display: inline-block;
    }
    .bank-value{
        line-height: 112upx;
        font-size: 28upx;
        margin-right: -2%;
    }
    .pick-button{
        display: inline-block;
        width: 50%;
        border-top:1px solid #E8E8E8;
        border-bottom:1px solid #E8E8E8;
        margin-bottom:constant(safe-area-inset-bottom);
        margin-bottom:env(safe-area-inset-bottom);
    }
    .sub-button{
        width: 98%;
        margin:30upx 0 0 1%;
        background: #D14F43;
        border-radius: 4upx;
    }
    .msg{
        font-size:32upx;
        color: #7f5734;
        padding: 20upx;
        margin-top: 40upx;
        border-top: 2px solid rgba(227, 227, 227, 1);
        border-bottom: 2px solid rgba(227, 227, 227, 1);
        background: -webkit-linear-gradient(#e5d7cb, white); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(#e5d7cb, white); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(#e5d7cb, white); /* Firefox 3.6 - 15 */
        background: linear-gradient(#e5d7cb, white); /* 标准的语法 */
    }
</style>
